<template>
  <view class="review-list-container">
    <view class="header-section">
      <text class="page-title">评价管理</text>
    </view>
    
    <view class="filter-section">
      <picker mode="selector" :range="typeOptions" @change="onTypeChange">
        <view class="filter-item">
          <text>{{ selectedType || '评价类型' }}</text>
        </view>
      </picker>
      
      <picker mode="selector" :range="statusOptions" @change="onStatusChange">
        <view class="filter-item">
          <text>{{ selectedStatus || '状态' }}</text>
        </view>
      </picker>
      
      <button class="filter-button" @click="fetchReviewList">筛选</button>
    </view>
    
    <view class="review-list">
      <view class="review-item" v-for="review in reviewList" :key="review.id">
        <view class="review-header">
          <view class="user-info">
            <image class="user-avatar" :src="review.userAvatar || '/static/logo.png'" mode="aspectFill"></image>
            <view class="user-details">
              <text class="user-name">{{ review.userName }}</text>
              <text class="review-time">{{ formatTime(review.createdAt) }}</text>
            </view>
          </view>
          <view class="review-rating">
            <text class="rating-stars">{{ renderStars(review.rating) }}</text>
            <text class="rating-score">{{ review.rating }}分</text>
          </view>
        </view>
        
        <view class="review-content">
          <text class="content-text">{{ review.content }}</text>
        </view>
        
        <view class="review-meta">
          <text class="meta-item">类型：{{ getReviewTypeText(review.type) }}</text>
          <text class="meta-item">对象：{{ review.targetName }}</text>
        </view>
        
        <view class="review-status">
          <text class="status-tag" :class="getStatusClass(review.status)">
            {{ getStatusText(review.status) }}
          </text>
        </view>
        
        <view class="review-actions">
          <button 
            class="action-button small" 
            @click="toggleReviewStatus(review)"
            v-if="review.status !== 2"
          >
            {{ review.status === 1 ? '隐藏' : '显示' }}
          </button>
          <button class="action-button small danger" @click="deleteReview(review)">删除</button>
        </view>
      </view>
    </view>
    
    <view class="pagination-section">
      <button class="pagination-button" :disabled="currentPage <= 1" @click="prevPage">上一页</button>
      <text class="page-info">第 {{ currentPage }} 页，共 {{ totalPages }} 页</text>
      <button class="pagination-button" :disabled="currentPage >= totalPages" @click="nextPage">下一页</button>
    </view>
    
    <view class="empty-state" v-if="reviewList.length === 0">
      <text class="empty-text">暂无评价</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 注意：这里我们暂时注释掉导入，因为API还没有完全实现
// import { reviewApi } from '../../../src/services/system'

// 评价列表
const reviewList = ref<any[]>([])

// 分页信息
const currentPage = ref(1)
const pageSize = ref(10)
const totalPages = ref(1)
const totalReviews = ref(0)

// 筛选条件
const typeOptions = ['课程', '教练', '健身计划']
const selectedType = ref('')
const statusOptions = ['全部', '显示', '隐藏']
const selectedStatus = ref('')

// 页面加载时获取评价列表
onMounted(() => {
  fetchReviewList()
})

// 获取评价列表
const fetchReviewList = async () => {
  try {
    // 模拟数据
    reviewList.value = [
      {
        id: 1,
        userName: '张三',
        userAvatar: '/static/logo.png',
        rating: 5,
        content: '教练非常专业，课程安排合理，让我受益匪浅。',
        type: 'course',
        targetName: '瑜伽课程',
        status: 1,
        createdAt: '2023-10-01T10:00:00Z'
      },
      {
        id: 2,
        userName: '李四',
        userAvatar: '/static/logo.png',
        rating: 4,
        content: '健身房设施齐全，环境舒适。',
        type: 'coach',
        targetName: '王教练',
        status: 1,
        createdAt: '2023-10-02T14:30:00Z'
      }
    ]
    
    totalReviews.value = reviewList.value.length
    totalPages.value = Math.ceil(totalReviews.value / pageSize.value)
    
    uni.showToast({
      title: '获取评价列表成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('获取评价列表失败:', error)
    uni.showToast({
      title: '获取评价列表失败',
      icon: 'none'
    })
  }
}

// 类型选择变化
const onTypeChange = (e: any) => {
  selectedType.value = typeOptions[e.detail.value]
}

// 状态选择变化
const onStatusChange = (e: any) => {
  selectedStatus.value = statusOptions[e.detail.value]
}

// 渲染星级评分
const renderStars = (rating: number) => {
  let stars = ''
  for (let i = 1; i <= 5; i++) {
    stars += i <= rating ? '★' : '☆'
  }
  return stars
}

// 格式化时间
const formatTime = (time: string) => {
  return time ? time.split('T')[0] : ''
}

// 获取评价类型文本
const getReviewTypeText = (type: string) => {
  switch (type) {
    case 'course': return '课程'
    case 'coach': return '教练'
    case 'plan': return '健身计划'
    default: return '未知'
  }
}

// 获取评价类型值
const getReviewTypeValue = (text: string) => {
  switch (text) {
    case '课程': return 'course'
    case '教练': return 'coach'
    case '健身计划': return 'plan'
    default: return ''
  }
}

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 1: return '显示'
    case 0: return '隐藏'
    case 2: return '已删除'
    default: return '未知'
  }
}

// 获取状态值
const getStatusValue = (text: string) => {
  switch (text) {
    case '显示': return 1
    case '隐藏': return 0
    default: return undefined
  }
}

// 获取状态样式类
const getStatusClass = (status: number) => {
  switch (status) {
    case 1: return 'status-active'
    case 0: return 'status-inactive'
    case 2: return 'status-deleted'
    default: return ''
  }
}

// 切换评价状态
const toggleReviewStatus = async (review: any) => {
  try {
    const newStatus = review.status === 1 ? 0 : 1
    // 模拟API调用
    console.log(`更新评价 ${review.id} 状态为 ${newStatus}`)
    
    uni.showToast({
      title: `${newStatus === 1 ? '显示' : '隐藏'}评价成功`,
      icon: 'success'
    })
    
    // 更新本地状态
    review.status = newStatus
    
    // 重新获取评价列表
    fetchReviewList()
  } catch (error) {
    console.error('更新评价状态失败:', error)
    uni.showToast({
      title: '更新评价状态失败',
      icon: 'none'
    })
  }
}

// 删除评价
const deleteReview = async (review: any) => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除这条评价吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          // 模拟API调用
          console.log(`删除评价 ${review.id}`)
          
          uni.showToast({
            title: '删除评价成功',
            icon: 'success'
          })
          
          // 重新获取评价列表
          fetchReviewList()
        } catch (error) {
          console.error('删除评价失败:', error)
          uni.showToast({
            title: '删除评价失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    fetchReviewList()
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    fetchReviewList()
  }
}
</script>

<style lang="scss" scoped>
.review-list-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.filter-section {
  display: flex;
  gap: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.filter-item {
  flex: 1;
  background-color: #f5f5f5;
  padding: 15rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

.filter-button {
  background-color: #4B0082;
  color: #fff;
  border: none;
  padding: 15rpx 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.review-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.user-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.review-time {
  font-size: 24rpx;
  color: #999;
}

.review-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rpx;
}

.rating-stars {
  font-size: 32rpx;
  color: #FFD700;
}

.rating-score {
  font-size: 24rpx;
  color: #4B0082;
  font-weight: bold;
}

.review-content {
  margin-bottom: 20rpx;
}

.content-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.review-meta {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #999;
}

.review-status {
  margin-bottom: 20rpx;
}

.status-tag {
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.status-active {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-inactive {
  background-color: #fff3e0;
  color: #ff9800;
}

.status-deleted {
  background-color: #ffebee;
  color: #f44336;
}

.review-actions {
  display: flex;
  gap: 10rpx;
  justify-content: flex-end;
}

.action-button {
  background-color: #4B0082;
  color: #fff;
  border: none;
  padding: 15rpx 30rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  
  &.small {
    padding: 10rpx 20rpx;
    font-size: 24rpx;
  }
  
  &.danger {
    background-color: #f44336;
  }
}

.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
  padding: 0 20rpx;
}

.pagination-button {
  background-color: #4B0082;
  color: #fff;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.pagination-button[disabled] {
  background-color: #ccc;
}

.page-info {
  font-size: 28rpx;
  color: #666;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>